<template>
	<view>
		<dsl-navbar isBack="" title=""></dsl-navbar>
		<view class="login_title ">
			密码登录
		</view>
		<view class="login_content">
			首次登录将自动注册
		</view>
		<view class=" margin-lr-xl solid-bottom padding" style="margin-top: 200rpx;">
			<input type="number" value="" placeholder="请输入手机号/邮箱" v-model="mobile" @confirm="submit" />
		</view>
		<view class=" margin-lr-xl solid-bottom padding" v-if="loginType==1">
			<input type="text" value="" placeholder="请输入密码" v-model="password" @confirm="submit" />
		</view>
		<view class=" margin-lr-xl solid-bottom rowsb padding" v-if="loginType==2">
			<input type="text" value="" placeholder="请输入验证码" v-model="password" @confirm="submit" />
			<view class="code" @click="codeGet"> {{count || '获取验证码'}}</view>
		</view>
		<view class="submit_bg animation-scale-up" @click="submit" v-if="loginType==1">
			<view hover-class="animation-scale-up">登录</view>
		</view>
		<view class="submit_bg animation-scale-up" @click="submit2" v-if="loginType==2">
			验证码登录
		</view>
		<view class="rowsb padding">
			<view class="skip_register" @click="$tools.push('/pages/login/register')">立即注册</view>
			<view class="skip_password" @click="loginType=2" v-if="loginType ==1"
				:class="{'animation-scale-up':loginType==1}">验证码登录</view>
			<view class="skip_password" @click="loginType=1" v-if="loginType ==2"
				:class="{'animation-scale-up':loginType==2}">密码登录</view>
		</view>

	 

	</view>
</template>

<script>
	import {
		set_login, //账号密码登录
		get_code, //获取验证码
		sms_register, //验证ma登录
	} from '@/common/path.js'
	export default {
		data() {
			return {
				closeInput: false, //是否线索输入框删除
				isJurisdiction: true, //是否选中
				mobile: '15588888888', //手机号
				password: '111111', //密码
				loginType: '1', //账号密码登录=1  ,验证码登录= 2
				count: '', //倒计时
			}

		},
		methods: {
			//获取验证码
			codeGet() {
				if (this.mobile.length != 11) {
					this.$tools.showToast('请填写正确手机号')
					return
				}
				let data = {
					mobile: this.mobile,
				}
				this.Http.POST(get_code, data)
					.then((res) => {
						if (res.code == 1) {
							this.getCode()
						}
						this.$tools.showToast(res.msg)
					})
			},

			getCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count -= 1;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},
			//验证码登录
			submit2() {
				if (this.mobile.length != 11) {
					this.$tools.showToast('请输入正确手机号')
				} else if (this.password == '') {
					this.$tools.showToast('请输入验证码密码')
					return false
				}
				let data = {
					mobile: this.mobile,
					captcha: this.password,
				}
				this.Http.POST(sms_register, data)
					.then(res => {
						console.log('进入', res);
						if (res.code == 1) {
							this.$tools.showToast2('登录成功')
							uni.setStorageSync('userInfo', res.data.userinfo)
							uni.setStorageSync('token', res.data.userinfo.token)
							setTimeout(r => {
								uni.reLaunch({
									url: '/pages/home/index'
								})
							}, 1000)

						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},

			//账号密码登录
			submit() {
				if (this.mobile.length != 11) {
					this.$tools.showToast('请输入正确手机号')
				} else if (this.password == '') {
					this.$tools.showToast('请输入密码')
					return false
				}
				let data = {
					mobile: this.mobile,
					password: this.password
				}
				this.Http.POST(set_login, data)
					.then(res => {
						console.log('进入', res);
						if (res.code == 1) {
							this.$tools.showToast2('登录成功')
							uni.setStorageSync('userInfo', res.data.userinfo)
							uni.setStorageSync('token', res.data.userinfo.token)
							setTimeout(r => {
								uni.reLaunch({
									url: '/pages/home/index'
								})
							}, 1000)

						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},
			//微信登录
			submitWx() {
				let that = this
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						// console.log('登录', res);
						//支持微信、qq和微博等

						if (~res.provider.indexOf('weixin')) {
							uni.login({
								provider: 'weixin',
								success: function(loginRes) {
									uni.getUserInfo({
										provider: 'weixin',
										success: function(infoRes) {
											that.third(loginRes.authResult.openid,
												infoRes.userInfo.avatarUrl, infoRes
												.userInfo.nickName)
										}
									});

								}

							})
						}
					},
					fail: (err) => {
						console.log('获取的登录方式', err)
					}
				});
			},

			inputMen(event) {
				console.log(event.detail.value);
				if (event.detail.value) this.closeInput = true
				else this.closeInput = false
			},
			JurisdictionMen() {
				this.isJurisdiction = !this.isJurisdiction
			}
		}
	}
</script>

<style>
	.login_title {
		font-size: 70rpx;
		font-weight: bold;
		padding: 50rpx
	}

	.login_content {
		font-size: 30rpx;
		color: #3D444D;
		padding: 0rpx 50rpx;
	}

	.submit_bg {
		background-image: linear-gradient(to right, #00D88F, #00D88F);
		padding: 30rpx;
		color: white;
		text-align: center;
		margin: 30rpx;
		border-radius: 999rpx;
		box-shadow: 0px 1px 10px rgba(0, 216, 143, 0.5);
	}

	.skip_register {
		color: #00D88F;
	}

	.skip_password {
		color: #999999;
	}

	.skip_wx>image {
		width: 80rpx;
		height: 80rpx;
		margin: 0 30rpx;
	}

	.jurisdiction {
		color: #06121E;
		display: flex;
		align-items: center;
		margin-top: 100rpx;
	}

	.jurisdiction>image {
		width: 30rpx;
		height: 30rpx;
	}

	.jurisdiction>text {
		margin-left: 20rpx;
	}

	.code {
		width: 190rpx;
		height: 60rpx;
		background: #999999;
		opacity: 1;
		border-radius: 30rpx;
		color: white;
		line-height: 60rpx;
		text-align: center;
	}
</style>
